﻿<form class="layui-form layui-form-pane" lay-filter="">
    <div class="layui-form-item">
        <label class="layui-form-label"><test>*</test> 角色名称</label>
        <div class="layui-input-block">
            <input type="text" name="RoleName" autocomplete="off" class="layui-input" maxlength="50" placeholder="必填项" lay-verify="required" />
        </div>
    </div>
    <table id="table"></table>
    <div class="layui-form-item" style="text-align:center;">
        <button class="layui-btn" lay-submit lay-filter="save">保存</button>
        <button class="layui-btn" id="cancel">取消</button>
    </div>
</form>
<script type="text/javascript">
    layui.extend({
        hyTreeTable: "/lib/hyTreeTable",
    });
    layui.use(['hyTreeTable'], function () {
        var $ = layui.jquery,
            form = layui.form;
        var treeTable = layui.hyTreeTable;
        // 渲染表格
        var treeTb = treeTable.render({
            elem: '#table',
            even: true,
            tree: {
                iconIndex: 1, // 折叠图标显示在第几列
                idName: 'Id', // 自定义id字段的名称
                pidName: 'ParentId', // 自定义标识是否还有子节点的字段名称
                isPidData: true // 是否是pid形式数据
            },
            url: '/SysResource/Index',
            method: 'post',
            height: '360',
            cols: [
                [
                    {
                        title: '请在下方选择角色权限',
                        colspan: 5
                    }
                ],
                [
                    {
                        type: 'checkbox'
                    },
                    {
                        field: 'ResourceName',
                        minWidth: 200,
                        title: '模块名称'
                    },
                    {
                        field: 'Id',
                        title: '模块编号'
                    },
                    {
                        field: 'ResourceType',
                        width: 100,
                        align: 'center',
                        templet: function (d) {
                            if (d.ResourceType == 1) {
                                return '菜单';
                            } else if (d.ResourceType == 2) {
                                return '按钮';
                            }
                        },
                        title: '模块类型'
                    },
                    {
                        field: 'ResourceState',
                        width: 100,
                        align: 'center',
                        templet: function (d) {
                            if (d.ResourceState == 0) {
                                return '<font color="red">禁用</font>';
                            } else if (d.ResourceState == 1) {
                                return '启用';
                            }
                        },
                        title: '模块状态'
                    }
                ]
            ],
            parseData: function (res) {
                return {
                    "code": res.Code == 200 ? 0 : res.Code, //解析接口状态
                    "msg": res.Message, //解析提示文本
                    "data": res.Data,
                    "count": res.Count
                };
            }
        });

        form.on("submit(save)", function (formdata) {
            let menu_ids = '';
            let permission_codes = '';
            treeTb.checkStatus().forEach(element => {
                menu_ids += element.Id + ',';
            });
            formdata.field.ResourceIds = menu_ids.substr(0, menu_ids.length - 1);
            $.ajax({
                url: '/SysRole/Add',
                data: formdata.field,
                success: function (res) {
                    if (res.Code == 200) {
                        layer.msg('保存成功', {
                            time: 1000
                        }, function () {
                            parent.layer.closeAll('iframe');
                        });
                    } else {
                        layer.msg(res.Message);
                    }
                }
            });
            return false;
        })
        $("#cancel").click(function () {
            parent.layer.closeAll();
            return false;
        })
    })
</script>